<template>
    <div class="water">
        <div class="qs" :style="{ height: curTopHeight + 'px'}">
            <div class="leftMain">
                <div class="table">
                    <div class="tableTitle">{{ getTitle() }}</div>
                </div>
                <timeRangeTable :height="curTopHeight"></timeRangeTable>
            </div>
            <div class="rightMain">
                <timeRangePieEcharts v-bind:key="type" :type="type"></timeRangePieEcharts>
            </div>
        </div>
        <div class="echarts" :style="{ height: curBottomHeight + 'px', padding: '10px', position: 'relative' }">
            <div class="rightTitle" style="position: relative;right: 30px">
                <!-- <span>区域建筑用能分析</span> -->
                <label> <i class="el-icon el-icon-upload2 download"></i>&nbsp;&nbsp;导出 </label>
                <label> <i class="el-icon el-icon-printer printer"></i>&nbsp;&nbsp;打印 </label>
            </div>
            <img src="@/assets/images/controlCenter/refresh.png" class="refresh" />
            <timeRangeBarEcharts :height="curBarHeight"></timeRangeBarEcharts>
        </div>
    </div>
</template>

<script>
import timeRangeBarEcharts from "./timeRangeBarEcharts"
import { moneyTable } from "@/mockData/monitorCenter"
import timeRangePieEcharts from "./timeRangePieEcharts"
import timeRangeTable from "./timeRangeTable"
export default {
    props: ["type", "phComs", "phIndexs"],
    components: {
        timeRangeBarEcharts,
        timeRangePieEcharts,
        timeRangeTable
    },
    computed: {
        curType() {
            return this.type
        },
        curPhComs() {
            return this.phComs
        },
        curPhIndexs() {
            return this.phIndexs
        }
    },
    watch: {
        curType(newVal) {
            this.typeName = newVal
        },
        curPhComs(newVal) {
            this.phCurComs = newVal
        },
        curPhIndexs(newVal) {
            this.phCurIndexs = newVal
        }
    },
    data() {
        return {
            phCurComs: [],
            phCurIndexs: [],
            typeName: 2,
            dataSource: moneyTable,
            tableColumns: [
                {
                    prop: "projectName",
                    label: "项目"
                },
                {
                    prop: "money",
                    label: "分表总能耗"
                },
                {
                    prop: "percent",
                    label: "占比"
                }
            ],
            btnList: [],
            pageSize: 20,
            pageCount: 100,
            pageNo: 1,
            tableRealHeight: (document.body.clientHeight - 130) / 4 + 48,
            tableHeight: (document.body.clientHeight - 130) / 4 + 50,
            curHeight: (document.body.clientHeight - 130) / 2,
            curTopHeight: (document.body.clientHeight - 130) / 2,
            curBottomHeight: (document.body.clientHeight - 130) / 2,
            curBarHeight: (document.body.clientHeight - 130) / 2 - 10
        }
    },
    methods: {
        getTitle() {
            let title = ""
            if (this.phCurIndexs.includes(1)) {
                title += "电"
            }
            if (this.phCurIndexs.includes(2)) {
                title += "水"
            }
            if (this.phCurIndexs.includes(3)) {
                title += "气"
            }
            if (this.phCurIndexs.includes(4)) {
                title += "热"
            }
            if (title == "") {
                title = "水"
            }
            const dateValue = "（日期：2025年1月）"
            return title + "时段分析" + dateValue
        }
    }
}
</script>

<style scoped>
.water {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.qs {
    display: flex;
    gap: 10px;
    .leftMain,
    .rightMain {
        background-color: #fff;
        padding: 10px;
    }

    .leftMain {
        width: 50%;

        .table {
            display: flex;
            /* flex布局 */
            justify-content: flex-start;
            /* 左对齐 */
            flex-wrap: wrap;
            /* 换行 */
            margin-top: 20px;

            .tableTitle {
                width: 100%;
                text-align: left;
                font-weight: bold;
                font-size: 18px;
                margin-bottom: 20px;
            }

            .jsr {
                font-size: 12px;
                margin-left: 10px;
                height: 22px;
                line-height: 22px;
                display: flex;

                .label {
                    font-size: 14px;
                    width: 50px;
                    color: #333;
                }

                .span {
                    flex: 1;
                    font-size: 14px;
                    line-height: 46px;
                    text-align: left;

                    img {
                        float: left;
                        margin-top: 14px;
                        margin-right: 10px;
                    }
                }

                .down {
                    color: #bef4a7;
                }

                .up {
                    color: #d93a26;
                }
            }

            .item {
                margin-left: 5px;
                width: calc((100% - 30px) / 3);
                /* height: 100px; */
                border-radius: 8px;
                border: 1px solid #eee;
                position: relative;
                cursor: pointer;
                background-color: #eee;

                label {
                    font-size: 13px;
                    width: 100%;
                    display: block;
                    line-height: 45px;
                    text-align: center;
                    height: 30px;
                }

                span {
                    font-size: 16px;
                    text-align: center;
                    width: 100%;
                    display: block;
                    height: 40px;
                    line-height: 36px;
                    color: #a1c87f;
                    font-weight: bold;
                }

                .red {
                    color: #d93a26;
                }
            }
        }

        .ysb {
            display: flex;
            /* flex布局 */
            justify-content: flex-start;
            /* 左对齐 */
            flex-wrap: wrap;
            /* 换行 */
            margin-top: 10px;

            .item {
                margin-left: 5px;
                /* 每个元素右间距设置为20px */
                width: calc((100% - 30px) / 3);
                height: 80px;
                border-radius: 8px;
                border: 1px solid #eee;
                position: relative;
                cursor: pointer;

                .title {
                    font-size: 14px;
                    line-height: 50px;
                    margin-left: 10px;
                }

                .value {
                    font-size: 12px;
                    margin-left: 10px;
                    color: #777;

                    label {
                        font-size: 14px;
                        color: #a1c87f;
                        margin-right: 10px;
                        font-weight: bold;
                    }
                }

                .down {
                    color: #bef4a7;
                }

                .up {
                    color: #d93a26;
                }

                .name {
                    font-size: 14px;
                    margin-top: 5px;
                    margin-left: 10px;
                }

                .money {
                    font-size: 16px;
                    color: #a1c87f;
                    font-weight: bold;
                    margin-left: 20px;
                    margin-top: 5px;
                    margin-bottom: 5px;
                }

                .jsrContent {
                    background-color: rgba(34, 49, 103, 0.3);
                    width: 90%;
                    margin-left: 5%;
                    border-radius: 6px;
                }

                .jsr {
                    font-size: 12px;
                    margin-left: 10px;
                    height: 22px;
                    line-height: 22px;
                    display: flex;

                    label {
                        font-size: 14px;
                        width: 50px;
                        color: #fff;
                    }

                    span {
                        font-size: 14px;
                    }

                    img {
                        float: left;
                        margin: 3px 5px;
                    }
                }
            }
        }
    }

    .rightMain {
        text-align: center;
        flex: 1;
    }
}

.echarts {
    position: relative;
    background-color: #fff;
    .refresh {
        position: absolute;
        width: 20px;
        right: 20px;
        cursor: pointer;
    }
}

.rightTitle {
    text-align: center;
    margin-bottom: 6px;

    span {
        text-align: center;
        font-weight: bold;
        font-size: 18px;
    }

    label {
        text-align: right;
        float: right;
        color: #3b8cfc;
        margin-right: 15px;
        cursor: pointer;
        font-size: 16px;
    }

    .printer {
        color: #3b8cfc;
    }

    .download {
        color: #3b8cfc;
    }
}
</style>
